<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>追踪记录列表</title>
		<script src="js/global.js"></script>
	</head>

	<body>
		<!-- 表单搜素 -->
		<div class="layui-form-item">
			<form class="layui-form">
			<div class="layui-inline">
					<label class="layui-form-label">编号id</label>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" id="stuId" autocomplete="off" placeholder="请输入ID" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">跟踪时间</label>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" name="beginTime" id="beginTime" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" name="endTime" id="endTime" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
					</div>
				</div>
			<input type="button" class="layui-btn" id="souBtn" value="搜索" />
			</form>
		</div>

		<!-- 表格容器 -->
		<table id="demo" lay-filter="test"></table>
		
		<script type="text/html" id="barDemo1">
			<h2 style="color: grey;">学生追踪记录列表</h2>
		</script>
		
		<!-- 脚本代码部分 -->
		<script>
			layui.use(['form', 'layer', 'table','laydate'], function() {
				var form = layui.form;
				var table = layui.table;
				var layer = layui.layer;
				var $ = layui.$;
				var laydate = layui.laydate;

				//执行一个laydate实例
				laydate.render({
					elem: '#beginTime' //指定元素
				});
				laydate.render({
					elem: '#endTime' //指定元素
				});
				//渲染表格
				table.render({
					elem: '#demo', //指定原始表格元素选择器（推荐id选择器）
					page: true, //开启分页
					url: globalData.server + 'track/getTrackList', //数据接口
					where: {
						token: globalData.getToken()
					},
					method: "post",
					toolbar: '#barDemo1',
					//limit:2,
					cols: [
						[ //标题栏
							{
								checkbox: true
							}, {
								field: 'id',
								title: '编号',
								sort: true,
								width: 120
							}, {
								field: 'stuId',
								title: '学生编号',
								//sort: true,
								width: 120
							},{
								field: 'trackTime',
								title: '跟踪时间',
								width: 180
							},{
								field: 'reviewSituation',
								title: '回访情况',
								width: 120
							}, {
								field: 'trackMode',
								title: '跟踪方式',
								width: 120
							}, {
								field: 'content',
								title: '跟踪内容',
								width: 120
							}, {
								field: 'nextTrackTime',
								title: '下次跟踪时间',
								width: 180
							}, {
								field: 'trackRemark',
								title: '备注',
								width: 120
							}
						]
					]
				});
				//渲染表格--end

				//搜索按钮的单击事件
				$("#souBtn").click(function() {
					//判断 区间的数据合理性
					if($("#min").val() > $("#max").val()) {
						alert("最高值不得高于起始值");
						return; //结束函数，下面的重载不会再执行
					}

					//表格重载
					table.reload('demo', {
						where: {
							stuId: $("#stuId").val(),
							beginTime: $("#beginTime").val(),
							endTime: $("#endTime").val(),
							min: $("#min").val(),
							max: $("#max").val()
						}
					});
				});
				//搜索按钮的单击事件-end

				//监听行内工具条
				table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据
					var layEvent = obj.event; //获得 lay-event 对应的值
					var tr = obj.tr; //获得当前行 tr 的DOM对象

					if(layEvent === 'detail') { //查看
						console.log(data)
						//数据展示在表单中
						form.val('xiugaiForm', data);
						//弹窗
						layer.open({
							title: "您正在修改咨询师权重信息",
							type: 1,
							area: ['800px', '600px'],
							content: $('#xiugaichuang')
						});
					}
				});
				//监听行内工具条---end


			});
		</script>

	</body>

</html>